<template>

  <div class="reviews" v-if="movieReviews.length > 0">
    <header class="title">长评</header>


    <ul class="reviews-list">

      <li class="review" v-for="review in movieReviews" :key="review.id">

        <div class="avatar">
          <img :src="review.author.avatarurl" :alt="review.author.nickName">
        </div>

        <div class="right">
          <div class="username">{{ review.author.nickName }} <span class="user-level">
              <img :src="levelImages[review.author.userLevel]" :alt="review.author.userLevel"
                v-if="levelImages[review.author.userLevel]" />
            </span> </div>
          <div class="title-content">
            <div class="title">{{ review.title }}</div>
            <div class="content">{{ review.text }}</div>
          </div>
          <div class="date-reply">
            <span class="date">{{ timestampToDate(review.created) }}</span>
            <span class="reply">{{ review.commentCount }}</span>
          </div>

        </div>


      </li>
    </ul>

  </div>

  <van-button block hairline plain v-if="movieReviews.length > 0">
    打开App，查看全部{{ reviewsTotal }}条长评

    <van-icon name="arrow" />
  </van-button>

</template>


<script setup>
import { timestampToDate } from "@/tools/index.js"
import { computed } from "vue";


const props = defineProps({

  movieReviews: {
    type: Object,
  }
});


const movieReviews = computed(() => props.movieReviews.reviews)

const reviewsTotal = computed(() => props.movieReviews.total)


// 使用 import.meta.glob 动态导入 user_level 文件夹中的所有图片
const levelImages = {};
const levelModules = import.meta.glob('@/assets/user_level/*.png', { eager: true });
for (const path in levelModules) {
  const level = path.match(/level(\d+)\.png/)[1];
  levelImages[level] = levelModules[path].default;
}





</script>




<style scoped>
.reviews {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 10px;
}

.reviews .title {
  font-size: 15px;
  color: #333;
  padding: 10px 0;

}


.reviews-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.review {
  display: grid;
  grid-template-columns: 1fr 10fr;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.review:last-child {
  border-bottom: none;
}


.review .avatar {
  margin-right: 10px
}

.review .avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.review .right {
  font-size: 12px;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

}

.review .right .user-level img {

  font-size: 12px;
  width: 36px;
  height: 16px;
  line-height: 1;
}


.review .right .name {
  margin-bottom: 5px;
}


.review .right .title {
  border-bottom: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 15px;
  color: #333;
  padding: 0;
}

.review .right .content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 13px;
  color: #333;
}


.review .date-reply {

  font-size: 12px;
  color: #999;
  margin-top: 10px;
  width: 100%;

}

.review .date-reply .reply {
  float: right;

}


:deep(.van-button__text) {
  color: #e54847;
}
</style>
